﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BusquedaPuntoEnElMapa.aspx.cs" Inherits="Web_Guia_Digital_Georeferenciada.BusquedaPuntoEnElMapa" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type = "text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "Stylesheet" type="text/css" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
    <script type ="text/javascript">
        // VARIABLES GLOBALES JAVASCRIPT
        var geocoder;
        var marker;
        var latLng;
        var latLng2;
        var map;

        // INICiALIZACION DE MAPA
        function initialize() {
            geocoder = new google.maps.Geocoder();	
            latLng = new google.maps.LatLng(-34.90, -56.130);
            map = new google.maps.Map(document.getElementById('mapCanvas'), {
                zoom:17,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.HYBRID  });


            // CREACION DEL MARCADOR  
            marker = new google.maps.Marker({
                position: latLng,
                title: 'Arrastra el marcador para buscar comercios cerca',
                map: map,
                draggable: true
            });

      

            // Escucho el CLICK sobre el mama y si se produce actualizo la posicion del marcador 
            google.maps.event.addListener(map, 'click', function (event) {
                updateMarker(event.latLng);
            });

 
      
            // Inicializo los datos del marcador
            //    updateMarkerPosition(latLng);
         geocodePosition(latLng);

   
            // Permito los eventos drag/drop sobre el marcador
            google.maps.event.addListener(marker, 'dragstart', function () {
                updateMarkerAddress('Arrastrando...');
            });

            google.maps.event.addListener(marker, 'drag', function () {
                updateMarkerStatus('Arrastrando...');
                updateMarkerPosition(marker.getPosition());
            });

            google.maps.event.addListener(marker, 'dragend', function () {
                updateMarkerStatus('Arrastre finalizado');
                geocodePosition(marker.getPosition());
            });
     }
      

        // Permito la gesti¢n de los eventos DOM
        google.maps.event.addDomListener(window, 'load', initialize);

        // ESTA FUNCION OBTIENE LA DIRECCION A PARTIR DE LAS COORDENADAS POS
        function geocodePosition(pos) {
            geocoder.geocode({
                latLng: pos
            }, function (responses) {
                if (responses && responses.length > 0) {
                    updateMarkerAddress(responses[0].formatted_address);
                } else {
                    updateMarkerAddress('No puedo encontrar esta direccion.');
                }
            });
        }

        // OBTIENE LA DIRECCION A PARTIR DEL LAT y LON DEL FORMULARIO
       /* function codeLatLon() {
            str = document.form_mapa.longitud.value + " , " + document.form_mapa.latitud.value;
            latLng2 = new google.maps.LatLng(document.form_mapa.latitud.value, document.form_mapa.longitud.value);
            marker.setPosition(latLng2);
            map.setCenter(latLng2);
            geocodePosition(latLng2);
            // document.form_mapa.direccion.value = str+" OK";
        }*/

        // OBTIENE LAS COORDENADAS DESDE lA DIRECCION EN LA CAJA DEL FORMULARIO
        /*function codeAddress() {
            var address = document.form_mapa.direccion.value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    updateMarkerPosition(results[0].geometry.location);
                    marker.setPosition(results[0].geometry.location);
                    map.setCenter(results[0].geometry.location);
                } else {
                    alert('ERROR : ' + status);
                }
            });
        }

        // OBTIENE LAS COORDENADAS DESDE lA DIRECCION EN LA CAJA DEL FORMULARIO
        function codeAddress2(address) {

            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    updateMarkerPosition(results[0].geometry.location);
                    marker.setPosition(results[0].geometry.location);
                    map.setCenter(results[0].geometry.location);
                    document.form_mapa.direccion.value = address;
                } else {
                    alert('ERROR : ' + status);
                }
            });
        }
        */



        function updateMarkerStatus(str) {
            alert(str);
            //document.form_mapa.direccion.value = str;
        }

        // RECUPERO LOS DATOS LON LAT Y DIRECCION Y LOS PONGO EN EL FORMULARIO
        function updateMarkerPosition(latLng) {

            alert(latLng.lng() + ", " + latLng.lat());
            /*document.form_mapa.longitud.value = latLng.lng();
            document.form_mapa.latitud.value = latLng.lat();*/
        }

        function updateMarkerAddress(str) {
            //document.form_mapa.direccion.value = str;
            alert("direccion" + str);
        }

        // ACTUALIZO LA POSICION DEL MARCADOR
        function updateMarker(location) {
            marker.setPosition(location);
            updateMarkerPosition(location);
            geocodePosition(location);
        }
   
    </script>
    <style type="text/css">
        .auto-style5 {
            width: 100px;
        }
        .auto-style6 {
            width: 100px;
        }
        .auto-style8 {
            left: 500px;
            height: 2px;
        }
        .auto-style9 {
            width: 100px;
            height: 2px;
        }
    </style>
</head>
<body style="height: 434px" onload="initialize();">
    <form id="form1" runat="server">
    
        <table border="0" cellpadding="5" style="height: 169px; margin-bottom: 200px; width: 150%;">
            <tr>
                <td class="auto-style9">

                </td>
                
                <td class="auto-style8">
                    <asp:Label ID="Label1" runat="server" style=" position: absolute; top: 22px; left: 310px;" Text="Buscar"></asp:Label>
                    <asp:DropDownList ID="DropDownList1" runat="server" style="position: absolute; left: 370px; top: 22px; width: 100px;">
                        <asp:ListItem Value="Nombre">Nombre</asp:ListItem>
                        <asp:ListItem>Rubro</asp:ListItem>
                        <asp:ListItem>Tag</asp:ListItem>
                        <asp:ListItem>Barrio</asp:ListItem>
                    </asp:DropDownList>
                     <asp:TextBox ID="txtBusqueda" runat="server"  style=" position: absolute;  top: 22px; width: 469px; left: 478px;"></asp:TextBox>
                    <input type="button" id="cmdBuscar" onclick="Buscar();" style=" position: absolute; top: 22px; left: 960px;"  value="Ver" />
                   
                    <br />
                </td>            
                <td class="auto-style9">
                </td>
            </tr>
            <tr>
                <td class="auto-style6">
                </td>
                <td id ="mapCanvas"   style=" position: absolute; left: 300px; top: 50px; height: 500px; width: 700px">
                </td>

                <td class="auto-style5">

                </td>
            </tr>
            </table>
    </form>
</body>
</html>
